<template>
  <div class="carousel" @mouseover="showset" @mouseout="hideset">
    <div v-if="themeConfig.background.length==1" :style="{'height':boxHeight}">
      <img :src="themeConfig.background[0]" style="width:100%;height:100%;">
    </div>
    <el-carousel trigger="click" :height="boxHeight" v-if="themeConfig.background.length>1">
      <el-carousel-item v-for="item in themeConfig.background" :key="item">
        <img :src="item" style="width:100%;height:100%;">
      </el-carousel-item>
      <!-- <el-carousel-item>
        <h3>啥地方撒防守打法</h3>
      </el-carousel-item> -->
    </el-carousel>
    <div class="mask" v-show="maskshow">
      <div class="settingbtn" @click="headset" style="right:30px">设置</div>
    </div>
  </div>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from 'vuex'
  export default {
    data: function () {
      return {
        maskshow: false,
        boxWidth:$(document).width()
      }
    },
    computed: {
      ...mapState([
        "pageConfig",
        "parameters"
      ]),
      themeConfig(){
        return this.pageConfig[this.pageConfig.theme]
      },
      boxHeight(){
        return this.boxWidth/3.5+"px"
      }
    },
    methods: {
      showset: function () {
        this.maskshow = true;
      },
      hideset: function () {
        this.maskshow = false;
      },
      headset: function () {
        this.$store.commit({
          type: 'showsetbox',
          setMod: 'SetCarousel',
          index: -1
        })
      }
    }
  }
</script>
<style scoped lang="less">
  .carousel{
    position: relative;
  }
</style>